<template>
	<view>
		<!-- 选择器设置组件 -->
		<uni-popup ref="diyListSelector" type="center">
			<view class="b_y bg-white" style="z-index: 8998;margin-top: -10px;width: 900px;height: 650px;">
				<scroll-view scroll-y="true" class="b_y bg-white"
					style="z-index: 8998;margin-top: -10px;width: 900px;height: 600px;">

					<view class="b_y bg-white">
						<view class="banmi_flex j-c p-t-20">
							<text class="f-w-800 f-20">配置</text>
						</view>

						<!-- 选择是本地还是从数据表获取 -->
						<view class="banmi_flex j-c p-b-20">
							<view class="" v-for="(item,index) in class_list" :key="index" style="width: 140px;">
								<view class="">
									<button @click="on_class_list(index)"
										:class="class_index==index?'class_but_xz':'class_but_wxz' ">
										<text>{{item.text}}</text>
									</button>
								</view>
							</view>
						</view>

						<!--  数据库获取 -->
						<view class="p-20" v-if="class_index==1">
							<template v-if="db_name_list.length>0">
								<text class="cred f-13">演示值</text>
								<view class="p-b-20" v-if="input_box_item=='checkbox'">
									<uni-data-checkbox :localdata="db_name_list" mode="default"></uni-data-checkbox>
								</view>
								<view class="p-b-20" v-if="input_box_item=='select'" style="width: 700rpx;">
									<uni-data-select isdata="data" :localdata="db_name_list" placeholder="选择">
									</uni-data-select>
								</view>
							</template>
							<view class=" " style="width: 580px;">
								<text class="cred f-13">请选择数据库表</text>
								<uni-data-select @change="change_db_list" :value="input_box_dbname.db_name"
									:localdata="db_list" placeholder="选择数据表">
								</uni-data-select>
							</view>
							<view class="p-t-10" style="width: 580px;">
								<text class="cred f-13">查询条件</text>
								<DiyFieldWhere ref="DiyFieldWhere" :crud_find='select_crud_find' :where_type="1"
									:items_index="items_index" :ziduan_list="select_field"
									:field_list="input_box_dbname.where">
								</DiyFieldWhere>
							</view>

							<view class="banmi_flex   p-t-20" style="width: 580px;">
								<view class=" " style="width: 280px;">
									<text class="cred f-13">显示名称的字段</text>
									<uni-data-select @change="change_select_field_name" :value="input_box_dbname.text"
										:localdata="select_field" placeholder="选中的名称字段">
									</uni-data-select>
								</view>
								<view class=" m-l-10" style="width: 280px;">
									<view class="">
										<text class="cred f-13">选择后得的值的字段</text>
									</view>
									<view class="">
										<uni-data-select class="" @change="change_select_field_value"
											:localdata="select_field" :value="input_box_dbname.value"
											placeholder="选中的值字段">
										</uni-data-select>
									</view>
								</view>
							</view>
						</view>


						<view class="p-20" v-if="class_index==0">
							<template v-if="input_box_item=='switch'">
								<view class="banmi_flex a-c  p-b-10">
									<view class="f-14 c-7" style="width: 100px;">
										开启的值
									</view>
									<uni-easyinput v-model="start_val" placeholder="请输入开启的值">
									</uni-easyinput>
								</view>
								<view class="banmi_flex a-c  p-b-10" sp-b-10>
									<view class="f-14 c-7" style="width: 100px;">
										关闭的值
									</view>
									<uni-easyinput v-model="close_val" placeholder="请输入关闭的值">
									</uni-easyinput>
								</view>
							</template>
							<template v-if="input_box_item=='checkbox' || input_box_item=='select'">
								<view class="p-b-20" v-if="input_box_item=='checkbox'">
									<uni-data-checkbox :localdata="input_box_val" mode="default"></uni-data-checkbox>
								</view>
								<view class="p-b-20" v-if="input_box_item=='select'" style="width: 700rpx;">
									<uni-data-select isdata="data" :localdata="input_box_val" placeholder="选择">
									</uni-data-select>
								</view>


								<view class="banmi_flex a-c" v-for="(item,index) in input_box_val" :key="index">
									<view class="banmi_flex a-c  p-b-10">
										<view class="f-14 c-7" style="width: 70px;">
											选择的值
										</view>
										<view class="" style="width: 160px;">
											<uni-easyinput v-model="item.value" placeholder="请输入值">
											</uni-easyinput>
										</view>
									</view>
									<view class="banmi_flex a-c  p-b-10 m-l-20">
										<view class="f-14 c-7" style="width: 70px;">
											选择名称
										</view>
										<view class="" style="width: 160px;">
											<uni-easyinput v-model="item.text" placeholder="请输入名称">
											</uni-easyinput>
										</view>
									</view>
									<view class="m-l-10">
										<button class="banmi_flex j-c a-c q-y" size="mini" @click="checkbox_del(index)"
											style="background-color: #FF0000;width: 50rpx;height: 50rpx;">
											<view class="cff f-30" style="margin-top: -6rpx;">x</view>
										</button>
									</view>
								</view>
								<view class="banmi_flex">
									<view class="banmi_flex a-c  p-b-10">
										<view class="f-14 c-7" style="width: 70px;">
										</view>
										<button size="mini" @click="checkbox_add"
											style="background-color: #1E90FF;width: 80px;">
											<text class="  f-30 cff">新增一列 + </text>
										</button>
									</view>
								</view>
							</template>
						</view>
						<view class="" style="height: 200px;">

						</view>


					</view>

				</scroll-view>
				<view class="banmi_flex j-s p-10  " size="mini" type="default">
					<view class="">
						<button @click="close" class="" size="mini" style="background-color: #DCDCDC;width: 80px;">
							<text class="f-30">关闭</text>
						</button>
					</view>
					<view class="">
						<button size="mini" @click="up_add_ok" style="background-color: #1E90FF;width: 80px;">
							<text class="  f-30 cff">确认</text>
						</button>
					</view>
				</view>


			</view>
		</uni-popup>


	</view>
</template>

<script>
	import provinceData from '@/components/fd-picker/city-china.json';
	import DiyFieldWhere from './diy_field_where.vue';

	export default {
		components: {
			DiyFieldWhere,
		},

		props: {
			windowHeight: {
				type: Number,
				default () {
					return 0;
				}
			},
			crud_type: {
				type: String,
				default () {
					return '';
				}
			},
			zhujian_id: {
				type: String,
				default () {
					return '';
				}
			},
			ziduan_list: {
				type: Array,
				default () {}
			},
			crud_find: {
				type: Object,
				default () {}
			},
			windowWidth: {
				type: Number,
				default () {
					return 0;
				}
			},

		},
		data() {
			return {
				find: {
					name: '',
				},
				class_list: [{
					"text": "自定义数据",
					"value": 0
				}, {
					"text": "从数据库获取",
					"value": 1
				}],
				provinceData: provinceData,
				start_val: '',
				close_val: '',
				checkbox_list: [{
					"text": "按钮",
					"value": 0
				}],
				where: 'where',

				where_list: [{
						"value": '=',
						"text": "等于",
					},
					{
						"value": '>=',
						"text": "大于等于",
					},
					{
						"value": '<>',
						"text": "不等于",
					},
					{
						"value": '<',
						"text": "小于",
					},
					{
						"value": '<=',
						"text": "小于等于",
					},
					{
						"value": 'like',
						"text": "模糊查询搜索",
					}
				],
				where_val: [{
						"value": '固定值',
						"text": "固定值",
					},
					{
						"value": "前端传值",
						"text": "前端传值",
					},
					{
						"value": "后端生成",
						"text": "后端生成",
					},
				],
				ziduan_list1: [],
				h_list_validate: [],
				field_where_list: [{
					'field': '', //字段
					'where': '', //字段条件
					'value_type': '', //值类型
					'value': '', //值
					'empty': true, //true=可以为空 false不可以为空
					'verify': '', //验证类型
					'verify_val': '', //验证名称 如某某不得为空
					'verify_id': '',
					'max_number': '', //最大数字
				}],
				field_data_list: [],
				list_kong: [{
						"value": 'true',
						"text": "可以为空",
					},
					{
						"value": 'false',
						"text": "必须有值",
					},
				],
				q_list_validate: [],
				items_index: '0',
				input_box_item: '',
				pass: {
					name: '提示',
					text: '确认通过审核吗?',
					cancellation: '取消',
					confirm: '确认',
					status: ''
				},
				class_index: 0,
				input_box_dbname: {
					where: [{
						'field': '', //字段
						'where': '', //字段条件
						'value_type': '', //值类型
						'value': '', //值
						'empty': true, //true=可以为空 false不可以为空
						'verify': '', //验证类型
						'verify_val': '', //验证名称 如某某不得为空
						'verify_id': '',
						'max_number': '', //最大数字
					}],
					db_name: '',
					text: '', //字段 名称
					value: '' //字段 值
				},
				db_list: [],
				select_field: [],
				db_name_list: [],
				db_name_list2: [],
				up_add_is: false,
				is_shows: false,
				checkbox_find: {},
				select_crud_find: {
					"type": "edit"
				},
				input_box_val: []


			}
		},
		methods: {
			change_db_list(index) {

				this.input_box_dbname['db_name'] = index;
				this.Banmikeji.PW_mysql_full_ajax(index).then(ret => {
			 
					this.select_field = ret

					for (var i = 0; i < this.select_field.length; i++) {
						this.select_field[i]['text'] = this.select_field[i]['Field']
						this.select_field[i]['value'] = this.select_field[i]['Field']
					}
					this.input_box_dbname['where'] = [{
						'field': '', //字段
						'where': '', //字段条件
						'value_type': '', //值类型
						'value': '', //值
						'empty': true, //true=可以为空 false不可以为空
						'verify': '', //验证类型
						'verify_val': '', //验证名称 如某某不得为空
						'verify_id': '',
						'max_number': '', //最大数字
					}];
					this.$refs['DiyFieldWhere'].open(this.input_box_dbname['where'], this.items_index, 0);



					let requestParams = {
						table: index,
					};
					this.Http.post('/admin.Mysql/db_init_list', requestParams).then(ret => {
						this.db_name_list1 = ret.data;
					})
				})
			},
			db_init() {
				this.Banmikeji.PW_mysql_init_ajax().then(ret => {
					var db_list = ret.data.table_info;
					this.db_list = [];
					for (var i = 0; i < db_list.length; i++) {
						db_list[i]['text'] = db_list[i]['Name'] + '-' + db_list[i]['Comment'];
						db_list[i]['value'] = db_list[i]['Name'];
						var reg = RegExp(this.plugin_name);
						if (reg.exec(db_list[i]['Name'])) {
							this.db_list.push(db_list[i]);
						}
					}
				})
			},
			up_add_ok() {
				this.up_find.input_box_dbname = this.input_box_dbname
				this.up_find.input_box_val = this.input_box_val
				this.up_find.class_index = this.class_index
				this.up_find.input_box_item = this.input_box_item
				this.$emit('change', this.up_find)
				this.close();
			},
			checkbox_del(index) {
				this.input_box_val.splice(index, 1);
			},
			//本地 新增一行
			checkbox_add() {
				var find = {
					text: '',
					value: ''
				}
				this.input_box_val.push(find)
				this.$forceUpdate()
			},
			on_class_list(index) {
				this.class_index = index
			},
			open(find) {


				this.plugin_name = uni.getStorageSync('plugin_name');
	
				let that = this;
				this.input_box_dbname = find.input_box_dbname
				if (find.input_box_val) {
					this.input_box_val = find.input_box_val
				}

				this.class_index = find.class_index
				this.input_box_item = find.input_box_item
				this.up_find = find;
				that.$refs.diyListSelector.open();
				if (this.class_index == 1) {
					this.change_db_list(this.input_box_dbname.db_name);
				}

				this.db_init();
			},
			close() {
				this.$refs.diyListSelector.close();
			},
			change_select_field_name(e) {
				this.input_box_dbname['text'] = e;
				if (this.input_box_dbname['value']) {
					this.db_name_list = [];
					for (var i = 0; i < this.db_name_list1.length; i++) {
						var find = {
							'value': this.db_name_list1[i][this.input_box_dbname['value']],
							'text': this.db_name_list1[i][e],
						}
						this.db_name_list.push(find);

					}
					this.input_box_val = this.db_name_list;


				}

			},
			change_select_field_value(e) {
				this.input_box_dbname['value'] = e;
				if (this.input_box_dbname['text']) {
					this.db_name_list = [];
					for (var i = 0; i < this.db_name_list1.length; i++) {
						var find = {
							'value': this.db_name_list1[i][e],
							'text': this.db_name_list1[i][this.input_box_dbname['text']]
						}
						this.db_name_list.push(find);
					}
					this.input_box_val = this.db_name_list;
				}

			},
		}
	}
</script>

<style>
	button {
		padding: 0;

		background: transparent;
	}

	button {
		padding: 0;

		background: transparent;
	}

	.pass_0 {
		border: #C0C0C0 3px dashed;
		width: 465rpx;
	}

	.pass_0xz {
		border: solid 3px red;

		width: 465rpx;
	}

	.xz_boxxx {

		align-items: center;

		width: 100%;
		/* 	border: red 3px dashed; */
		border: solid 3px red;
	}

	.boxxx {

		align-items: center;

		width: 100%;
		border: #C0C0C0 3px dashed;

	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}

	button::after {
		border: none;
	}
</style>